<template>
  <div class="mindmap-container" ref="mindMapContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import MindMap from 'simple-mind-map';

const mindMapContainer = ref<HTMLElement | null>(null);
let mindMap: any = null;

// 思维导图数据
const mindMapData = {
  root: {
    data: {
      text: '根节点',
    },
    children: [
      {
        data: {
          text: '分支主题1',
          expand: true,
        },
        children: [
          {
            data: {
              text: '子主题1.1',
            },
          },
          {
            data: {
              text: '子主题1.2',
            },
          },
        ],
      },
      {
        data: {
          text: '分支主题2',
          expand: true,
        },
        children: [
          {
            data: {
              text: '子主题2.1',
            },
          },
          {
            data: {
              text: '子主题2.2',
            },
          },
        ],
      },
    ],
  },
};

// 配置选项
const mindMapOptions = {
  el: null as HTMLElement | null,
  data: mindMapData,
  layout: 'catalogOrganization', // 布局类型：mindMap（思维导图）、logicalStructure（逻辑结构图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）
  theme: {
    // 主题配置
    root: {
      fill: '#ff4d4f',
      color: '#fff',
    },
    second: {
      fill: '#40a9ff',
      color: '#fff',
    },
    branch: {
      fill: '#73d13d',
      color: '#fff',
    },
  },
  style: {
    // 样式配置
    lineWidth: 2,
    lineColor: '#333',
    rootLineColor: '#333',
    lineType: 'cubic-bezier', // 连线类型：straight（直线）、cubic-bezier（贝塞尔曲线）、polyline（折线）
  },
};

onMounted(() => {
  if (mindMapContainer.value) {
    mindMapOptions.el = mindMapContainer.value;
    mindMap = new MindMap(mindMapOptions);
    
    // 监听事件
    mindMap.on('node_click', (node: any) => {
      console.log('点击了节点:', node);
    });

    mindMap.on('node_double_click', (node: any) => {
      console.log('双击了节点:', node);
    });
  }
});

onUnmounted(() => {
  if (mindMap) {
    mindMap.destroy();
  }
});
</script>

<style scoped>
.mindmap-container {
  width: 100%;
  height: 600px;
  border: 1px solid #ddd;
  background-color: #fff;
}
</style>